<template>
  <div>
    <!-- 头部标签 -->
    <van-nav-bar fixed>
      <template #left>
        <img class="logo" src="@/assets/toutiao_logo.png" />
      </template>
      <template #right>
        <van-icon
          name="search"
          size="0.48rem"
          color="#fff"
          @click="$router.push('/search')"
        />
      </template>
    </van-nav-bar>
    <!-- tab导航栏 频道部分-->
    <div class="main">
      <van-tabs
        sticky
        animated
        offset-top="1.22667rem"
        swipeable
        v-model="channel_id"
        @change="changeFn"
      >
        <van-tab
          :title="obj.name"
          v-for="obj in channelList"
          :key="obj.id"
          :name="obj.id"
        >
          <article-list :id="channel_id"></article-list>
        </van-tab>
      </van-tabs>
      <!-- 编辑频道图标 -->
      <van-icon
        name="plus"
        size="0.37333334rem"
        class="moreChannels"
        @click="show = true"
      />
      <!-- 频道管理弹出层 -->
      <van-popup v-model="show" get-container="body">
        <channel-edit
          :UserChannel="channelList"
          :NotSelectedChannel="NoSelectedChannel"
          @addChannel="addFn"
          @delChannel="delFn"
          @goChannel="goFn"
          ref="channelRef"
        ></channel-edit>
      </van-popup>
    </div>
  </div>
</template>

<script>
import {
  getAllChannel,
  getUserChannel,
  setChannel,
} from '@/api/channel/index.js'
import ArticleList from './ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
export default {
  name: 'MyHome',
  data() {
    return {
      channelList: [], // 用户已选频道列表
      AllChannel: [], // 所有频道列表
      channel_id: 0, // 选了哪个频道 用于获取文章列表
      show: false, // 是否展示频道管理弹出层
      channelObj: {}, // 保存每个频道的滚动位置 保证切换频道时 位置不会改变
    }
  },
  created() {
    this.getUserchannel()
    this.getAllpd()
  },
  // 当该组件被激活时
  activated() {
    // 监听页面滚动事件
    window.addEventListener('scroll', this.scrollFn)
    // 把之前保存的滚动位置再设置给该页面
    document.documentElement.scrollTop = this.$route.meta.HomeScroll
    document.body.scrollTop = this.$route.meta.HomeScroll
  },
  // 当该组件被缓存时
  deactivated() {
    // 移除监听页面滚动事件
    window.removeEventListener('scroll', this.scrollFn)
  },
  methods: {
    // 保存该页面的滚动位置
    scrollFn() {
      // 谷歌浏览器内核,和安卓手机内置浏览器的内核不是同一个
      // 获取scrollTop方式不同
      // 谷歌浏览器用的html的scrollTop
      // 有的浏览器用的body的scrollTop
      // console.log(1)
      this.$route.meta.HomeScroll =
        document.documentElement.scrollTop || document.body.scrollTop
      // 保存该频道的滚动位置
      this.channelObj[this.channel_id] =
        document.documentElement.scrollTop || document.body.scrollTop
      // console.log(this.channelObj)
    },
    // 频道切换事件
    changeFn() {
      // tab切换时，这个组件内部，会把切走的容器height设置为0，滚动条因为没有高度回到了顶部
      // 切回来的一瞬间，没有高度，滚动事件从底下上来也被触发了，所以才把数据里设置为0
      // 切回来的一瞬间，高度为0，你设置滚动位置也无用
      this.$nextTick(() => {
        // console.log(2)
        document.documentElement.scrollTop = this.channelObj[this.channel_id]
        document.body.scrollTop = this.channelObj[this.channel_id]
      })
    },
    // 获取用户选择的频道列表
    async getUserchannel() {
      const { data: res } = await getUserChannel()
      if (res.message !== 'OK') {
        return this.$notify({ type: 'danger', message: '获取数据失败' })
      }
      // console.log(res)
      this.channelList = res.data.channels
    },
    // 获取所有频道列表
    async getAllpd() {
      const { data: res } = await getAllChannel()
      if (res.message !== 'OK') {
        return this.$notify({ type: 'danger', message: '获取数据失败' })
      }
      this.AllChannel = res.data.channels
    },
    // 增加频道
    addFn(obj) {
      this.channelList.push(obj)
      this.setChannel()
    },
    // 删除频道
    delFn(obj) {
      this.channelList = this.channelList.filter((x) => x.id !== obj.id)
      this.setChannel()
    },
    // 进去频道 --->关闭弹出层
    goFn(id) {
      if (id === '关闭') {
        // 关闭弹出层
        this.show = false
        this.$refs.channelRef.textflag = false
      } else {
        // 直接进去频道
        this.show = false
        this.channel_id = id
      }
    },
    // 设置频道
    async setChannel() {
      const newArray = this.channelList.map((x, index) => {
        const newObj = { ...x } // 浅拷贝
        delete newObj.name
        newObj.seq = index
        return newObj
      })
      const { data: res } = await setChannel(newArray)
      console.log(res)
    },
  },
  computed: {
    // 没有选择的频道列表
    NoSelectedChannel() {
      const newArray = this.AllChannel.filter((x) => {
        const flag = this.channelList.some((y) => y.name === x.name)
        if (!flag) return x
      })
      return newArray
    },
  },
  components: {
    ArticleList,
    ChannelEdit,
  },
}
</script>

<style lang="less" scoped>
.logo {
  width: 100px;
  height: 30px;
}
.main {
  padding-top: 46px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 60px;
  right: 8px;
  z-index: 999;
}
.van-popup {
  height: 100%;
  width: 100%;
}
</style>
